<template>
  <div class="main" v-loading="loading">
    <div class="aside perfect-scrollbar">
      <aside-menu :HomeTabs="GuideTabs" />
    </div>
    <div
      class="content"
      v-loading="contentLoading"
    >
      <div
        class="content-default"
        v-if="helpId==='default'"
      >
        <h2>帮助中心</h2>
        <div>
          <help-center-default :problems="guides" />
        </div>
      </div>
      <markdown-preview
        v-else
        :value="content"
      />
    </div>
  </div>
</template>

<script>
import HelpCenterDefault from './HelpCenterDefault.vue'
import { getGuideInfo, getSecondContent, secondClick } from '@/api/guide'
export default {
  name: 'HelpCenterDetail',
  components: {
    HelpCenterDefault
  },
  data () {
    return {
      loading: false,
      guides: [],
      GuideTabs: [],
      helpId: '',
      HomeTabs: [],
      content: '',
      contentLoading: false
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler () {
        this.helpId = this.$route.query.helpId || 'default'
        this.helpId !== 'default' && this.handleGetSecondContent()
      }
    }
  },
  mounted () {
    this.handleGetInfo()
  },
  methods: {
    // 获取全部信息
    async handleGetInfo () {
      this.loading = true
      const { data } = await getGuideInfo()
      this.loading = false
      this.guides = data
      this.transfer()
    },
    transfer () {
      this.GuideTabs = this.guides.map((item) => {
        return {
          sub: true,
          index: item.firstGradeId + '',
          title: item.firstGradeTitle,
          icon: item.icon,
          children: item.secondVOList.map((child) => {
            return {
              index: `/helpcenterdetail?helpId=${child.id}`,
              title: child.title
            }
          })
        }
      })
    },
    async handleGetSecondContent () {
      this.contentLoading = true
      await secondClick(this.helpId)
      const { data } = await getSecondContent(this.helpId)
      this.content = data.content
      this.contentLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin-bottom: 20px;
  display: flex;
  .aside {
    height: 100%;
    margin-right: 10px;
    max-height: 700px;
    overflow-y: scroll;
  }
  .content {
    flex: 1;
    height: 700px;
    .content-default {
      padding: 8px 25px 0 25px;
      margin-bottom: 15px;
      height: 100%;
      height: 100%;
      box-shadow: $shadow;
      h2 {
        margin-top: 24px;
        padding-bottom: 0.3em;
        border-bottom: 1px solid #eaecef;
      }
    }
  }
}
</style>
